<template>
  <div>
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="图书名称">
        <el-input v-model="query.name" placeholder="请输入图书名称关键字" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="图书分类">
        <el-cascader v-model="value" :props="{
            children: 'child',
            label: 'title',
            value: 'id'
          }" :options="options" clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="query.guanjian" placeholder="请输入作者关键字" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="form.orderNum" placeholder="请输入出版社关键字" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker type="date" placeholder="开始日期一结束日期" v-model="form.date1" style="width: 300px;" size="mini">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入库人">
        <el-input v-model="form.ruku" placeholder="请输入入库人关键字" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="入库时间">
        <el-date-picker type="date" placeholder="开始日期一截至日期" v-model="form.date1" style="width: 300px;" size="mini">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" @click="onSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-left" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <p>
      <el-button type="primary" size="mini" @click="$router.push({name:'addbooks'})">新增图书</el-button>
    </p>
    <!-- 表格数据 -->
    <p>
      <el-table border stripe ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="id" prop="id">
        </el-table-column>
        <el-table-column prop="name" label="图书名称" width="200px">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px;vertical-align: middle;" :src="scope.row.cover_img">
            </el-image>
            {{scope.row.name}}

          </template>
        </el-table-column>
        <el-table-column prop="book_classify" label="所属分类">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120px"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="publisher" label="出版社" width="120px"></el-table-column>
        <el-table-column label="出版时间" width="120px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.created_at|createdAt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <!-- {{scope.row.status}} -->

            <span v-show="scope.row.status==3">待上架</span>
            <span v-show="scope.row.status==2">已下架</span>
            <span v-show="scope.row.status==1">已上架</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="序号"></el-table-column>
        <el-table-column prop="creator" label="入库人"></el-table-column>
        <el-table-column label="入库时间" width="160px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.publish_time|createdBt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="paixu(scope.row)" type="text" size="small">排序</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">下架</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </p>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
      :page-sizes="[2, 4, 6, 8]" :page-size="query.limit" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getBooks, getClass } from "../../api/api6";
export default {
  data() {
    return {
      form: {
        orderNum: "",
        date1: "",
        ruku: "",
        date2: "",
      },
      list: [],
      options: [],
      value: "",
      total: 0,
      query: {
        page: 1,
        limit: 4,
        name: "",
        guanjian: "",
      },
      copylist: [],
    };
  },
  filters: {
    createdAt(val) {
      var dates = new Date(val * 1000);
      var y = dates.getFullYear();
      var m = dates.getMonth() + 1;
      var d = dates.getDate();
      var h = dates.getHours();
      var f = dates.getMinutes();
      var s = dates.getSeconds();
      return `${y}/${m}/${d}`;
    },
    createdBt(val) {
      var dates = new Date(val * 1000);
      var y = dates.getFullYear();
      var m = dates.getMonth() + 1;
      var d = dates.getDate();
      var h = dates.getHours();
      var f = dates.getMinutes();
      var s = dates.getSeconds();
      return `${y}/${m}/${d} ${h}:${f}:${s}`;
    },
  },
  watch: {
    query: {
      deep: true,
      handler() {
        this.getlist();
      },
    },
  },
  mounted() {
    this.getlist();
    getClass(this.query).then((res) => {
      this.options = res.data;
    });
  },
  methods: {
    paixu() {},
    onSearch() {
      this.list = this.copylist.filter((item) => {
        return (
          item.name.includes(this.form.name) &&
          item.author.includes(this.form.guanjian) &&
          item.publisher.includes(this.form.orderNum) &&
          item.creator.includes(this.form.ruku)
        );
      });
    },
    getlist() {
      getBooks(this.query).then((res) => {
        console.log(res);
        this.list = res.data.list;
        this.copylist = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.query.limit = val;
    },
    handleCurrentChange(val) {
      this.query.page = val;
    },
  },

  computed: {},
};
</script>

<style lang="scss">
.el-image {
  width: 50px !important;
  height: 50px !important;
  img {
    width: 50px;
    height: 50px;
  }
}
.title {
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 10px 20px;
  margin-bottom: 30px;
  // text-align: right;
}
.el-table th,
.el-table td,
.el-table tr {
  text-align: center;
}
</style>
